import React, { PureComponent } from 'react';
import {
    View,
    Image,
    TouchableOpacity,
    Modal,
    StyleSheet,
    Text
} from 'react-native'
import Constant from '../utils/Constant';
import Style from '../utils/style/style';
import ImageViewer from 'react-native-image-zoom-viewer';
const HOST = Constant.HOST;
export default class CellImages extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            zoomImages: false,
            imagesUrls: ''
        }
    }
    _zoomImages(source) {
        this.setState({
            zoomImages: true,
            imagesUrls: [{ url: HOST + source }]
        })
    }
    _hideImages() {
        this.setState({
            zoomImages: false
        })
    }

    render() {
        const { images } = this.props;
        const { zoomImages, imagesUrls } = this.state;

        return (

            <View style={styles.cell}>
                <Modal visible={zoomImages} transparent={true} onRequestClose={() => this._hideImages()}>
                    <ImageViewer imageUrls={imagesUrls} renderIndicator={() => null} saveToLocalByLongPress={false} onClick={() => { this._hideImages() }} onCancel={() => { this._hideImages() }}  enableImageZoom={false}/>
                </Modal>
                {
                    images && images.length > 0 ?
                        images.map(source => {
                            return (
                                <TouchableOpacity style={styles.imagesWrap} onPress={() => { this._zoomImages(source) }}>
                                    <Image style={styles.image} source={{ uri: HOST + source }} />
                                </TouchableOpacity>)
                        })
                        : null
                }
            </View>

        )
    }
}
const styles = StyleSheet.create({
    cellWrap: {
        width: Style.width,

    },
    cell: {
        padding: 10,
        flex: 1,
        width: Style.width,
        height: 60,
        // backgroundColor: 'red',
        borderStyle: 'solid',
        borderColor: '#e5e5e5',
        borderBottomWidth: 1,
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap'
    },
    imagesWrap: {
        width: 50,
        height: 50,
        marginRight: 5,
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor: '#999'
    },
    image: {
        width: 50,
        height: 50,
        // backgroundColor: 'red'
    }
})